<template>
  <div class="login_main" ref="login_main">
    <my-header class="fixed">
      <!-- <img :src="lang.icons[lang.check]" /> -->
      <el-select v-model="lang" @change="changeLang" class="select_lang">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <i class="middle_line"></i>
      <span
        class="el-icon-full-screen scale_screen"
        @click="scaleScreen"
      ></span>
    </my-header>

    <el-card class="box-card login_con">
      <div class="con">
        <img
          class="back_icon"
          v-show="isRegister"
          src="../../assets/back.svg"
          @click="isRegister = false"
        />
        <img class="type" :src="international.icons[international.check]" />
        <img class="logo" src="../../assets/logo.png" />

        <div v-if="isRegister">
          <el-form>
            <h4>创建新的SenseCAP云平台组织</h4>
            <p>组织名称:</p>
            <el-input class="input" placeholder="Organization"></el-input>
            <p>邮箱:</p>
            <el-input class="input" placeholder="Email address"></el-input>
            <el-button type="primary" @click="register" class="login_btn"
              >注册</el-button
            >
            <p class="mini_font">
              (注册完成后,信息不能修改，如果您想修改，请联系：<span href="#"
                >sensecap@seed.cc</span
              >)
            </p>
          </el-form>
        </div>
        <div v-if="!isRegister">
          <el-form :model="formData" ref="form1" :rules="rules">
            <el-form-item :label="$t('lang.account') + ':'" prop="account">
              <el-input
                class="input"
                v-model="formData.account"
                placeholder="Account"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('lang.password') + ':'" prop="password">
              <el-input
                v-model="formData.password"
                class="input"
                placeholder="Your Password"
                :show-password="true"
              ></el-input>
            </el-form-item>
            <a href="#">{{ $t("lang.forgetPassword") }}</a>
            <p>{{ $t("lang.sliderText") }}:</p>
            <!-- <el-input class="input" placeholder="Email address"></el-input> -->
            <scroll-bar />

            <el-button type="primary" @click="login" class="login_btn">{{
              $t("lang.login")
            }}</el-button>
            <el-button
              type="primary"
              @click="isRegister = true"
              class="register_btn"
              plain
              >{{ $t("lang.register") }}</el-button
            >
          </el-form>
        </div>
      </div>
    </el-card>

    <footer>
      <img class="seed" src="../../assets/seeed.png" />
      <div>
        <p>© 2008-2021 {{ $t("lang.compony") }}</p>
        <p>粤ICP备13058720号</p>
      </div>
      <p>{{ $t("lang.privacy") }}</p>
      <img src="../../assets/mcafee.png" />
      <el-select v-model="international.check" class="select_lang">
        <el-option
          v-for="item in international.select"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </footer>
  </div>
</template>

<script>
import MyHeader from "@/components/MyHeader.vue";
import ScrollBar from "./components/ScrollBar.vue";

export default {
  name: "login",
  data() {
    return {
      formData: {
        //表单数据
        organization: "",
        email: "",
        account: "",
        password: "",
      },
      rules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      isRegister: false,
      options: [
        { label: this.$t("lang.cs"), value: "zh" },
        { label: this.$t("lang.is"), value: "en" },
      ],
      lang: "",
      international: {
        check: "china",
        select: [
          { label: "国际站", value: "international" },
          { label: "中国站", value: "china" },
        ],
        icons: {
          china: require("../../assets/cn.png"),
          international: require("../../assets/cc.png"),
        },
      },
      mniScreen: true,
    };
  },
  components: {
    ScrollBar,
    MyHeader,
  },
  methods: {
    //注册
    register() {},

    //登录
    login() {
      this.$refs.form1.validate((valid) => {
        if (valid) {
          //验证成功
          this.$store.dispatch("LoginAction", this.formData);
        } else {
          //验证没通过
          console.log("验证:没通过");
        }
      });
    },

    //切换语言集
    changeLang() {
      console.log("切换语言集触发了");
      //调用 vuex中的lang子树的 mutations
      // this.$i18n.locale = "en"
      this.$i18n.locale = this.lang;
      this.$store.commit("SET_LANG", this.lang);
      this.$router.go(0)
    },

    scaleScreen() {
      if (this.mniScreen) {
        //放大
        this.$refs.login_main.webkitRequestFullscreen();
      } else {
        //缩小
        document.webkitExitFullscreen();
      }
      this.mniScreen = !this.mniScreen;
    },
  },

  created() {
    this.lang = this.$store.getters.locale;
     this.$i18n.locale = this.lang;
     this.options = [
        { label: this.$t("lang.cs"), value: "zh" },
        { label: this.$t("lang.is"), value: "en" },
      ];
  },
};
</script>

<style scoped lang="scss">
.login_main::-webkit-scrollbar {
  display: none;
}

.login_main {
  width: 100%;
  height: 110%;
  background-color: #ebeef2;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

  .fixed {
    top: 0;
    left: 0;
    position: fixed;
  }

  footer {
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: 0;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;

    img:nth-of-type(1) {
      width: 116px;
      height: 27px;
      vertical-align: middle;
    }
    img:nth-of-type(2) {
      width: 75px;
      height: 26px;
      margin-right: 30px;
    }

    > div {
      width: 300px;
      margin-left: 30px;
      p {
        font-size: 12px;
      }
    }

    > p:nth-of-type(1) {
      display: inline-block;
      width: 100px;

      font-size: 12px;
      text-align: center;
    }
  }

  .login_con {
    width: 380px;
    height: 540px;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .mini_font {
      font-size: 12px !important;
      color: #999;
      > span {
        color: rgb(0, 162, 255);
        text-decoration: underline;
      }
    }
    .back_icon:hover {
      cursor: pointer;
    }

    h4 {
      margin: 20px 0;
      display: inline-block;
      width: 100%;
      text-align: center;
    }
    .back_icon {
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      margin: 10px;
    }
    .con {
      width: 380px;
      height: 540px;
      display: flex;
      padding: 20px 40px;
      box-sizing: border-box;
      position: relative;
      flex-direction: column;
      align-items: center;

      .login_btn,
      .register_btn {
        width: 100%;
        margin-top: 20px;
        margin-left: 0;
      }
      .type {
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 50px;
      }

      a {
        display: inline-block;
        text-align: left;
        width: 100%;
        color: #333;
        font-size: 12px;
        margin: 10px;
      }
      p {
        display: inline-block;
        width: 100%;
        font-size: 15px;
        font-weight: bold;
        color: rgb(104, 104, 104);
        margin: 20px 0 5px 0;
        text-align: left;
      }

      .logo {
        width: 140px;
        margin: 10px 0;
      }
    }
  }

  .select_lang {
    width: 120px;
  }

  .scale_screen {
    font-size: 25px;
    font-weight: bold;
    color: #999;
  }

  .scale_screen:hover {
    color: rgb(0, 132, 255);
    cursor: pointer;
  }

  .middle_line {
    height: 50%;
    width: 2px;
    margin: 0 13px;
    border-right: 2px solid rgb(212, 212, 212);
  }
}
</style>